<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完成加载过程
// var echarts = require('echarts')
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
// 图标默认基础数据
import radarData from './radar'
export default {
  data() {
    return {
      // 初始的图标数据
      radarData,
      // 雷达图变量
      myChart: null
    }
  },
  // 页面渲染完毕事件
  mounted() {
    this.myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    this.myChart.setOption(this.radarData)
    // 请求雷达图数据
    this.loadRadarData()
  },
  methods: {
    // 请求获取雷达的数据
    loadRadarData() {
      setTimeout(() => {
        // 后端返回的数据
        const res = [
          {
            value: [10, 1, 100, 5, 100, 0],
            name: '张三'
          },
          {
            value: [50, 50, 50, 50, 50, 10],
            name: '李四'
          }
        ]
        // 数据赋给图标对应位置
        this.radarData.series[0].data = res
        // 绘制雷达图
        this.myChart.setOption(this.radarData)
      }, 3000)
    }
  }
}
</script>

<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>
